<template>
  <div class="big_screen">
    <div class="big_head">
      <NewHead />
    </div>
    <div class="big_left">
      <NewLeft />
    </div>
    <div class="big_right">
      <NewRight />
    </div>
    <div class="big_footer">
      <NewFooter />
    </div>
    <div class="map_btn">
      <mapBtn :jingQu="jingQu" @clickMapBtn="clickMapBtn"/>
    </div>
    <mapPage :mapArr="mapArr"></mapPage>
  </div>
</template>
<script>
import {
  jingQuPageApi, // 景区分页
} from "@/api/YApi/scenicSpot";

import NewHead from "./pages/NewHead.vue";
import NewLeft from "./pages/NewLeft.vue";
import NewRight from "./pages/NewRight.vue";
import NewFooter from "./pages/NewFooter.vue";
import mapBtn from "./pages/mapBtn.vue";

import mapPage from "./pages/mapPage.vue";
import VideoPage from "./components/videoPage.vue";
import LeftTitle from "./components/LeftTitle.vue";

import img01 from "@/assets/screen/01.png";
import img02 from "@/assets/screen/02.png";
import img03 from "@/assets/screen/03.png";
import img04 from "@/assets/screen/04.png";

import img05 from "@/assets/screen/05.png";
import img06 from "@/assets/screen/06.png";
import img07 from "@/assets/screen/07.png";
import img08 from "@/assets/screen/08.png";

import {
  navigationApi,
  indexInfoApi,
  getSituationApi,
  jinquPeoNumIndexApi, // 景区人流排名
  equipNNumApi, // 设备统计
  peopleCityApi, // 客源地统计
  analysisPeopleApi, // 客流检测
  timePeopleApi, // 不同时段游客数量
  agePeopleApi, // 不同年龄段占比
  inPeopleNumApi, // 头部入园人数
} from "@/api/bigScreen";

export default {
  name: "bigScreen",
  components: {
    NewHead,
    NewLeft,
    NewRight,
    NewFooter,
    mapBtn,

    mapPage,
    VideoPage,
    LeftTitle,
  },
  provide() {
    return {};
  },
  data() {
    return {
      jingQu: [],
      inPeopleObj: {}, // 入园人数
      agePeopleArr: [], // 不同年龄段占比
      timePeopleArr: [], // 不同时段游客数量
      analysisPeople: {}, // 客流检测
      peopleCityArr: [], // 客源地
      equipNumArr: [], // 设备统计
      peopleIndexArr: [],
      isShowVideo: false,
      navigationArr: [], // 导航数据
      rightTopArr: [
        {
          img: img08,
          title: "昨日客流人次",
          num: 0,
          text: "人",
          tongUpOrDown: 1, //1 上升 0下降
          tongNum: 0,
          huanUpOrDown: 1, //1 上升 0下降
          huanNum: 0,
        },
        {
          img: img05,
          title: "当前客流人次",
          num: 0,
          text: "人",
          tongUpOrDown: 1, //1 上升 0下降
          tongNum: 0,
          huanUpOrDown: 0, //1 上升 0下降
          huanNum: 0,
        },
        {
          img: img07,
          title: "当月客流人次",
          num: 0,
          text: "人",
          tongUpOrDown: 1, //1 上升 0下降
          tongNum: 0,
          huanUpOrDown: 0, //1 上升 0下降
          huanNum: 0,
        },
        {
          img: img06,
          title: "当月客流消费",
          num: 0,
          text: "元",
          tongUpOrDown: 1, //1 上升 0下降
          tongNum: 0,
          huanUpOrDown: 0, //1 上升 0下降
          huanNum: 0,
        },
      ],
      personTrend1: ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
      personTrend2: [10, 20, 30, 40, 20, 30],
      personTrend3: [10, 20, 30, 40, 20, 30],
      personTrend4: [10, 20, 30, 40, 20, 30],
      rightDataObj: {
        todayPerson: {
          num: 0,
          circlePercent: 0,
          syncPercent: 0,
        },
        lastDayPerson: {
          num: 0,
          circlePercent: 0,
          syncPercent: 0,
        },
      },
      centerNum: [
        {
          title: "总访问量",
          img: img01,
          num: 0,
          title2: "次",
        },
        {
          title: "昨日游客人数",
          img: img02,
          num: 0,
          title2: "人",
        },
        {
          title: "累计游客人次",
          img: img03,
          num: 0,
          title2: "人",
        },
        {
          title: "今日游客人次",
          img: img04,
          num: 0,
          title2: "人",
        },
      ],
      navigation: [],
      deviceInfo: {},
      personAnalysis: [
        {
          range: 100,
          percent: "100%",
        },
      ],
      active: 0,
      btnList: [
        {
          name: "山顶实时监控视频0",
          url: "http://vjs.zencdn.net/v/oceans.mp4",
        },
        {
          name: "山顶实时监控视频1",
          url: "http://vjs.zencdn.net/v/oceans.mp4",
        },
        {
          name: "山顶实时监控视频2",
          url: "http://vjs.zencdn.net/v/oceans.mp4",
        },
        {
          name: "山顶实时监控视频3",
          url: "http://vjs.zencdn.net/v/oceans.mp4",
        },
      ],
      mapArr: [],
    };
  },
  methods: {
    init() {
      this.flexible();
      this.getJinquPeoNumIndex();
      this.getEquipNNum();
      this.peopleCityNum();
      this.getAnalysisPeople();
      this.getTimePeople();
      this.getAgePeople();
      this.getInPeopleNum();
      this.getJingQuPage();
    },

    clickMapBtn(index){
      console.log(this.jingQu[index]);
      this.mapArr = [this.jingQu[index]];
    },
    // 获取景区
    getJingQuPage() {
      jingQuPageApi({ pageNum: 1, pageSize: 4 })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.jingQu = res.rows;
          } else {
            this.jingQu = [];
          }
        })
        .catch((err) => {
          this.jingQu = [];
        });
    },

    // 入园人数
    getInPeopleNum() {
      inPeopleNumApi().then((res) => (this.inPeopleObj = res.data));
    },

    // 不同年龄段占比
    getAgePeople() {
      let colors = [
        {
          color0: "rgba(181, 235, 144, 0)",
          color1: "rgba(181, 235, 144, .3)",
          color2: "rgba(181, 235, 144, .6)",
        },
        {
          color0: "rgba(0, 211, 253, 0)",
          color1: "rgba(0, 211, 253, .3)",
          color2: "rgba(0, 211, 253, .6)",
        },
        {
          color0: "rgba(22, 145, 255, 0)",
          color1: "rgba(22, 145, 255, .3)",
          color2: "rgba(22, 145, 255, .6)",
        },
        {
          color0: "rgba(19, 228, 227, 0)",
          color1: "rgba(19, 228, 227, .3)",
          color2: "rgba(19, 228, 227, .6)",
        },
        {
          color0: "rgba(253, 254, 254, 0)",
          color1: "rgba(253, 254, 254, .3)",
          color2: "rgba(253, 254, 254, .6)",
        },
      ];
      agePeopleApi().then((res) => {
        let data = res.data.map((v) => {
          return {
            age: v.age,
            num: v.num,
            percent: v.percent,
            ...colors[v.index],
          };
        });
        console.log(data, "datadata");
        this.agePeopleArr = data;
      });
    },

    // 不同时段游客数量
    getTimePeople() {
      timePeopleApi().then((res) => (this.timePeopleArr = res.data));
    },

    // 客流检测
    getAnalysisPeople() {
      analysisPeopleApi().then((res) => (this.analysisPeople = res.data));
    },

    // 客源地统计
    peopleCityNum() {
      peopleCityApi().then((res) => {
        this.peopleCityArr = res.data;
      });
    },

    // 设备统计
    getEquipNNum() {
      equipNNumApi().then((res) => {
        this.equipNumArr = [
          ...res.data,
          {
            ...res.data[0],
            name: "其他设备",
          },
        ];
      });
    },

    // 景区人流量排名
    getJinquPeoNumIndex() {
      jinquPeoNumIndexApi(5).then((res) => {
        this.peopleIndexArr = res.data;
        // store.dispatch("setPeoNumber", res.data);
      });
    },
    clickBtn() {
      alert("123");
    },
    clickToggle() {
      this.isShowVideo = !this.isShowVideo;
    },
    // 信息接口
    getIndexInfo(id) {
      indexInfoApi({ id })
        .then((res) => {
          if (res.code === 200) {
            this.centerNum[0].num = res.data.totalAccess ?? 100;
            this.centerNum[1].num = res.data.lastdayPeople ?? 100;
            this.centerNum[2].num = res.data.totalPeople ?? 200;
            this.centerNum[3].num = res.data.todayPeople ?? 100;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSituation(id) {
      getSituationApi({ id })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            let data = res.data;
            // 昨日客流人次
            this.rightTopArr[0].num = data.lastdayPeople ?? 0;
            //1 上升 0下降
            this.rightTopArr[0].tongUpOrDown =
              data.propleYOYstatus === "up" ? 1 : 0;
            this.rightTopArr[0].tongNum = data.peopleYOY;
            //1 上升 0下降
            this.rightTopArr[0].huanUpOrDown =
              data.propleQOQstatus === "up" ? 1 : 0;
            this.rightTopArr[0].huanNum = data.peopleQOQ;

            // 当前客流人次
            this.rightTopArr[1].num = data.todayPeople ?? 0;
            //1 上升 0下降
            this.rightTopArr[1].tongUpOrDown =
              data.propleYOYstatus === "up" ? 1 : 0;
            this.rightTopArr[1].tongNum = data.peopleYOY;
            //1 上升 0下降
            this.rightTopArr[1].huanUpOrDown =
              data.propleQOQstatus === "up" ? 1 : 0;
            this.rightTopArr[1].huanNum = data.peopleQOQ;

            // 当月客流人次
            this.rightTopArr[2].num = data.monthPeople ?? 0;
            //1 上升 0下降
            this.rightTopArr[2].tongUpOrDown =
              data.propleYOYstatus === "up" ? 1 : 0;
            this.rightTopArr[2].tongNum = data.peopleYOY;
            //1 上升 0下降
            this.rightTopArr[2].huanUpOrDown =
              data.propleQOQstatus === "up" ? 1 : 0;
            this.rightTopArr[2].huanNum = data.peopleQOQ;

            // 当月客流消费
            this.rightTopArr[3].num = data.monthPrice ?? 0;
            //1 上升 0下降
            this.rightTopArr[3].tongUpOrDown =
              data.costYOYstatus == "up" ? 1 : 0;
            this.rightTopArr[3].tongNum = data.costYOY;
            //1 上升 0下降
            this.rightTopArr[3].huanUpOrDown =
              data.costQOQstatus == "up" ? 1 : 0;
            this.rightTopArr[3].huanNum = data.costQOQ;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getInfoFun(id) {
      this.getIndexInfo(id);
      this.getSituation(id);
    },
    changeInfoC(id) {
      this.getInfoFun(id);
    },
    // 导航接口
    getNavigationTree() {
      navigationApi()
        .then((res) => {
          if (res.code === 200) {
            this.navigationArr = res.data;
          } else {
            this.navigationArr = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.navigationArr = [];
        });
    },

    btnClick(index) {
      this.active = index;
      if (index === 4) {
        this.$router.push({ path: "/shujufenxi/keliu" });
      } else if (index === 1) {
        this.$router.push({ path: "/anquan/historyalarm" });
      } else if (index === 3) {
        this.$router.push({ path: "/form/culture" });
      }
    },
    // 子组件想父组件传递的数据
    // handleMessage(data) {
    //   this.mapArr = data;
    // },
  },
  created() {
    this.init();
    // this.getNavigationTree();
    // this.getInfoFun();
  },
  destroyed() {
    document.body.style.fontSize = "12px";
  },
};
</script>
<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

.big_screen {
  width: 100%;
  height: 100%;
  font-size: 2rem;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;

  background-image: url("~@/assets/images/newImg/bgd.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-color: #000;

  .big_head {
    width: 100%;
    @include px2vh(height, 80);
    margin-bottom: 1%;
    position: absolute;
    top: 0;
    z-index: 10;
  }
  .head_people {
    @include px2vw(width, 875);
    @include px2vh(height, 80);

    position: absolute;
    @include px2vh(top, 124);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }

  .big_left {
    @include px2vw(width, 460);
    @include px2vh(height, 940);

    position: absolute;
    @include px2vw(left, 32);
    @include px2vh(top, 120);
    background: linear-gradient(
      180deg,
      rgba(5, 25, 53, 0.8) 2%,
      rgba(5, 25, 53, 0.6) 100%
    );
    z-index: 10;
  }
  .big_right {
    @include px2vw(width, 460);
    @include px2vh(height, 940);

    position: absolute;
    @include px2vw(right, 32);
    @include px2vh(top, 120);
    background: linear-gradient(
      180deg,
      rgba(5, 25, 53, 0.8) 2%,
      rgba(5, 25, 53, 0.6) 100%
    );
    z-index: 10;
  }
  .big_footer {
    @include px2vw(width, 920);
    @include px2vh(height, 320);
    background: linear-gradient(
      180deg,
      rgba(5, 25, 53, 0.8) 2%,
      rgba(5, 25, 53, 0.6) 100%
    );
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    @include px2vh(margin-bottom, 20);
    z-index: 10;
  }
  .map_btn {
    @include px2vw(width, 129);
    // @include px2vh(height, 100%);
    height: 10%;

    position: absolute;
    @include px2vw(left, 473);
    @include px2vh(top, 175);
    z-index: 8;
    color: #fff;
    @include px2font(20);
  }
}

.el-icon-error {
  height: 1.25rem !important;
  display: flex;
  align-items: center;
}

.el-message .el-icon-error {
  font-size: 1rem;
}

.el-checkbox__inner {
  border-radius: 1% !important;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.8s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>
